<template>
	<view>
		<view class="cu-list menu-avatar" v-if="list.length>0">
			<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
				<view class="cu-avatar radius lg" :style="'background-image:url('+item.url+'_200_200)'" @click="toDetail(item.id)"></view>
				<view class="content">
					<view class="title" @click="toDetail(item.id)">{{item.name}}</view>
					<view class="bg-white price">
					   <view class="main-color text-xl fl margin-right">
						   价格:{{item.price}}
					   </view>					
					   <view class="text-gray text-lg fl">
						   销量:{{item.sales}}
					   </view>
					</view>
				</view>
				<view class="move">
					<view class="main-bg-color" @click="removeFavorite(item.id)">删除</view>
				</view>
			</view>
		</view>
		<view v-else class="text-gray margin-top-100 text-center">您还没有收藏过哦~!</view>
	</view>
</template>

<script>
	import {ProductService,FavoriteService} from "@/api/ProductService.js"
	export default {
		data() {
			return {
				modalName: null,
				list:[]
			};
		},
		onPullDownRefresh() {
			this.loadFavorites();
			uni.stopPullDownRefresh();
		},
		onReady() {
			this.loadFavorites();
		},
		methods:{
			confirmOrder(){
				uni.navigateTo({
					url:"./confirm"
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			loadFavorites(){
				ProductService.listFavorite().then(res=>{
					this.list=res;
				});
			},
			toDetail(productId){
				uni.navigateTo({
					url:"/pages/product/detail?productId="+productId
				});
			},
			removeFavorite(productId){
				FavoriteService.unFavorite(productId).then(()=>{
					this.loadFavorites();
				});
			}
		}
	}
</script>

<style lang="scss">
.cu-item{
	height:250rpx !important;
	.cu-avatar{width: 200rpx;height: 200rpx;}
	.content{
		left: 250rpx !important;
		height: 100%;
		margin-top:20rpx;
		.price{
			clear:both;
			margin-top:20rpx;
			position: absolute;
			bottom: 20px;
			width: 100%;
		}
	}
}
</style>